﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HostAgent</title>
    <script src="jquery.js"></script>
    <script src="loger.js"></script>

    <style type="text/css">
        body {
            background-color: #e7e7e7;
        }

        .div_top {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 40px;
        }

        .div_mid {
            position: absolute;
            top: 40px;
            bottom: 300px;
            left: 0px;
            right: 0px;
            border-top: 1px solid #d1d1d1;
            border-bottom: 1px solid #d1d1d1;
        }

        .div_bottom {
            position: absolute;
            height: 300px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }

        .div_bottom_log {
            position: absolute;
            height: 260px;
            bottom: 40px;
            left: 0px;
            right: 0px;
            background-color: black;
            /*        margin: auto;
            margin-top: 5px;*/
            overflow: auto;
        }

        .div_bottom_copyright {
            position: absolute;
            height: 40px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }

        .btnClearLogButton {
            width: 80px;
            height: 30px;
            position: absolute;
            right: 5px;
            top: 4px;
        }

        .div_left_nav {
            position: absolute;
            width: 150px;
            height: 570px;
            top: 8px;
            bottom: 0px;
            left: 0px;
            border: 1px solid #d1d1d1;
        }

        .div_right_content {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 150px;
            right: 0px;
        }

        .iframe_normal {
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            border-width: 0px;
        }

        .iframe_ie {
            width: 100%;
            height: 100%;
        }


        .nav_ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 150px;
            height: calc(100% - 82px);
            /*background-color: #f1f1f1;*/
            position: fixed; /* 使它产生粘性，即使在滚动时 */
            overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
        }

            .nav_ul li {
                display: block;
                height: 30px;
                vertical-align: middle;
                border-bottom: 1px solid #d1d1d1;
                font-weight: bold;
                font-size: 18px;
                /*color: #9b9b9b;*/
                color: #424842bb;
                background-color: #d1d1d1;
            }

                .nav_ul li:last-child {
                    border-bottom: none;
                }

                /* 鼠标悬停时改变链接颜色 */
                .nav_ul li:hover {
                    /*background-color: #9b9b9b;
                    color: #ffffff;*/

                    border-bottom: 2px solid #b6b6b6;
                    cursor: default;
                }



        .top_title {
            position: absolute;
            left: 5px;
            top: 0px;
            margin-top: 5px;
            /*vertical-align:central;*/
            font-size: 18px;
            font-weight: bolder;
            color: black;
        }

        .topButton {
            position: absolute;
            right: 5px;
            bottom: 0px;
            border-bottom: 2px solid #b6b6b6;
            /*width:100px;
            background-color:darkgray;*/
        }

            .topButton:hover {
                cursor: pointer;
            }

        .copyright {
            /*position: absolute;
            left: 5px;
            top: 0px;*/
            margin-top: 8px;
            text-align: center;
            color: black;
        }
    </style>


    <script type="text/javascript">

        let isIE = function (ver) {
            let b = document.createElement('b')
            b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
            return b.getElementsByTagName('i').length === 1;
        }

        function addIframClass() {
            let ifmEle = document.getElementById("iframeContent");
            if (isIE()) {
                ifmEle.className = "iframe_ie";
            }
            else {
                ifmEle.className = "iframe_normal";
            }
        }

        let logDivEle = null;
        //设置垂直滚动条位置
        //scrollTop<0时,滚动到底部
        function setElementVerScrollBarLocation(ele, scrollTop = -1) {
            if (scrollTop < 0) {
                scrollTop = ele.scrollHeight;
            }

            ele.scrollTop = scrollTop;
        }

        function outputLog(message, level) {
            let foreColor;
            //level:    0:trace;1:debug;2:info;3:warn;4:error;5:fatal
            switch (level) {
                case logLevels.trace:
                    foreColor = "gray";
                    break;
                case logLevels.debug:
                    foreColor = "whitesmoke";
                    break;
                case logLevels.info:
                    foreColor = "white";
                    break;
                case logLevels.warn:
                    foreColor = "yellow";
                    break;
                case logLevels.error:
                    foreColor = "red";
                    break;
                case logLevels.fatal:
                    foreColor = "firebrick";
                    break;
                default:
                    foreColor = "blueviolet";
                    break;
            }

            let pEle = document.createElement("p");
            pEle.style.color = foreColor;
            //pEle.style.height = "5px";
            if (logDivEle.children.length > 0) {
                pEle.style.marginTop = "-12px";
            }
            else {
                pEle.style.marginTop = "0px";
            }
            //margin-top:-12px
            pEle.innerText = message;
            logDivEle.appendChild(pEle);
            let hasRemove = false;
            //只显示100项日志记录
            while (logDivEle.children.length > 100) {
                logDivEle.children[0].remove();
                hasRemove = true;
            }
            if (hasRemove) {
                logDivEle.children[0].style.marginTop = "0px";
            }

            //滚动到底部
            setElementVerScrollBarLocation(logDivEle);
        }

        function clearLog() {
            logDivEle.innerHTML = "";
        }

        let websocketUrl = null;
        _websocket = null;
        function _createWebSocket() {
            _closeWebsocket();

            _websocket = new WebSocket(websocketUrl);
            _websocket.onopen = function (e) {
                loger.info('webSocket connection opened .');
                let authObj = {};
                authObj.pluginID = "";
                authObj.dataType = 3;
                authObj.data = "";
                let json = JSON.stringify(authObj);
                _websocket.send(json);
                loger.info('webSocket向服务端发送日志订阅消息完成.');
            };

            _websocket.onmessage = function (e) {
                let publishLogItem = JSON.parse(e.data);
                loger.log(publishLogItem.level, publishLogItem.time, publishLogItem.message);
            };
            _websocket.onclose = function (e) {
                loger.info('Connection closed.' + e.code + ' ' + e.reason);
                _createWebSocket();
            };
            _websocket.onerror = function (e) {
                //loger.error(e);
                loger.error("websocket连接服务端失败,等待3秒后重试.");
                setTimeout(_createWebSocket, 3000);
                //_createWebSocket();
            };
        }

        function _closeWebsocket() {
            let webSocket = _websocket;
            if (webSocket == null) {
                return;
            }

            _websocket = null;
            webSocket.onopen = null;
            webSocket.onmessage = null;
            webSocket.onclose = null;
            webSocket.onerror = null;
            webSocket.close();
        }




        let baseUrl = null;
        let iframeContentEle = null;
        let ulNavEle = null;

        let LOGLEVEL_INFO = 1;
        let LOGLEVEL_ERROR = 2;
        function showLog(level, message) {
            alert(message);
            //let levelName, foreColor;
            //switch (level) {
            //    case LOGLEVEL_INFO:
            //        levelName = "信息";
            //        foreColor = "gray";
            //        break;
            //    case LOGLEVEL_ERROR:
            //        levelName = "错误";
            //        foreColor = "red";
            //        break;
            //    default:
            //        levelName = "未知";
            //        foreColor = "yellow";
            //        break;
            //}

            //let dateTime = new Date();
            //let timeStr = toShowyyyyMMddHHmmss(dateTime);
            //let logInfo = timeStr + " " + levelName + " " + message;
            //let pEle = document.createElement("p");
            //pEle.style.color = foreColor;
            ////pEle.style.height = "5px";
            //if (logDivEle.children.length > 0) {
            //    pEle.style.marginTop = "-12px";
            //}
            //else {
            //    pEle.style.marginTop = "0px";
            //}
            ////margin-top:-12px
            //pEle.innerText = logInfo;
            //logDivEle.appendChild(pEle);
            //let hasRemove = false;
            ////只显示100项日志记录
            //while (logDivEle.children.length > 100) {
            //    logDivEle.children[0].remove();
            //    hasRemove = true;
            //}
            //if (hasRemove) {
            //    logDivEle.children[0].style.marginTop = "0px";
            //}

            ////滚动到底部
            //setElementVerScrollBarLocation(logDivEle);
        }

        //function clearLog() {
        //    logDivEle.innerHTML = "";
        //}

        function showRet(ret, status) {
            if (ret.status == 1) {
                return;
            }

            if (ret.Data) {
                showLog(LOGLEVEL_INFO, ret.Data);
            }
            else if (ret.data) {
                showLog(LOGLEVEL_INFO, ret.data);
            }
            else {
                showLog(LOGLEVEL_INFO, "status:" + status + "\r\n" + ret);
            }
        }

        function showErrRet(err) {
            if (err.status == 200) {
                //浏览器bug,内容复杂的json解析会失败,提示说解析错误.不鸟它
                showLog(LOGLEVEL_INFO, err.responseText);
            }
            else {
                showLog(LOGLEVEL_ERROR, err.statusText);
            }
        }

        function getReqHeaders() {
            let headers =
            {
                "token": "xxx",
                "uid": 1
            };

            return headers;
        }


        function initNav() {
            let url = baseUrl + "getPluginHomePageInfos";
            $.ajax({
                type: "GET",
                url: url,
                async: true,
                headers: getReqHeaders(),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (ret, status) {
                    if (typeof (ret) == "string") {
                        showLog(LOGLEVEL_INFO, ret);
                    }
                    else {
                        if (ret.status == 1) {
                            let pluginHomePageInfos = JSON.parse(ret.data);
                            let html = "";
                            for (let pluginHomePageInfo of pluginHomePageInfos) {
                                html += '<li onclick="navClick(this,\'' + pluginHomePageInfo.url + '\')">' + pluginHomePageInfo.name + '</li>';
                            }
                            ulNavEle.innerHTML = html;

                            //默认选中第一项
                            if (ulNavEle.children.length > 0) {
                                ulNavEle.children[0].onclick();
                            }
                        }
                        else {
                            showLog(LOGLEVEL_ERROR, ret.data);
                        }
                    }
                },
                error: showErrRet
            });
        }

        let lastSelectedNavItem = null;
        function navClick(navItem, url) {
            if (lastSelectedNavItem == navItem) {
                return;
            }

            iframeContentEle.src = url;

            if (lastSelectedNavItem != null) {
                lastSelectedNavItem.style.backgroundColor = '#d1d1d1';
                //lastSelectedNavItem.style.color = '#b6b6b6';
            }

            navItem.style.backgroundColor = '#b6b6b6';
            //navItem.style.color = '#fb6602';
            //navItem.style.borderWidth = '2px';
            //navItem.style.borderColor = 'red';

            lastSelectedNavItem = navItem;
        }


        let inited = false;
        function init() {
            if (inited) {
                return;
            }

            loger.logerIns = new logerCore();
            loger.logerIns.outputLog = outputLog;
            logDivEle = document.getElementById("divLog");
            inited = true;
        }

        function getLogerIns() {
            init();
            return loger.logerIns;
        }


        function onload() {
            init();

            addIframClass();

            baseUrl = window.document.location.origin + "/api/v1/host/";
            iframeContentEle = document.getElementById("iframeContent");
            ulNavEle = document.getElementById("ulNav");
            initNav();

            websocketUrl = window.document.location.origin.replace("http://", "ws://");
            _createWebSocket();
        }

        function showConsole() {
            let url = baseUrl + "showConsole";
            $.ajax({
                type: "GET",
                url: url,
                async: true,
                headers: getReqHeaders(),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: showRet,
                error: showErrRet
            });
        }

        function hidenConsole() {
            let url = baseUrl + "hideConsole";
            $.ajax({
                type: "GET",
                url: url,
                async: true,
                headers: getReqHeaders(),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: showRet,
                error: showErrRet
            });
        }

        function exit() {
            let url = baseUrl + "exit";
            $.ajax({
                type: "GET",
                url: url,
                async: true,
                headers: getReqHeaders(),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                //success: showRet,
                //error: showErrRet
            });
        }
    </script>
</head>
<body onload="onload()">
    <div class="div_top">
        <p class="top_title">主机代理</p>
        <p class="topButton" style="margin-right:170px" onclick="showConsole()">显示控制台</p>
        <p class="topButton" style="margin-right:70px" onclick="hidenConsole()">隐藏控制台</p>
        <p class="topButton" style="margin-right:20px" onclick="exit()">退出</p>
    </div>

    <div class="div_mid">
        <div id="divLeft" class="div_left_nav">
            <!--<button class="navItem">看门狗11</button>
            <button class="navItem">看门狗22</button>-->
            <ul id="ulNav" class="nav_ul">
                <li onclick="navClick(this,'watchdog.html')">看门狗11</li>
                <li>看门狗22</li>
                <li>看门狗22</li>
                <li>看门狗22</li>
            </ul>
        </div>

        <div id="divRight" class="div_right_content">
            <iframe id="iframeContent" src="">
            </iframe>
        </div>
    </div>

    <div class="div_bottom">
        <div id="divLog" class="div_bottom_log">

        </div>

        <div id="divCopyright" class="div_bottom_copyright">
            <p class="copyright">版权©归XXX</p>
            <button class="btnClearLogButton" onclick="clearLog()">清空</button>
        </div>
    </div>
</body>
</html>